import React, { useState } from 'react'

import { Outlet, useNavigate } from 'react-router-dom'

export default function Home() {

  // 编程路由导航
  const navigate = useNavigate()  // 返回一个用于编程式路由导航的方法

  const [active, setActive] = useState(true)

  const [news] = useState({
    id: '001',
    username: '老李',
    news: [
      {id: '010', content: '交通运输部：多措并举让公路更智能、更绿色'},
      {id: '011', content: '拜登控枪演讲时遭受害者家属打断'},
      {id: '012', content: '母女被雨衣男拖拽 警方：男子已被依法刑事拘留'}
    ]
  })

  const [messages] = useState({
    id: '006',
    username: '老王',
    messages: [
      {id: '010', content: '*******'},
      {id: '011', content: '*******'},
      {id: '012', content: '*******'}
    ]
  })

  const newsBtnHandler = () => {
    setActive(true)
    navigate(`/main/home/news/{${news.id}}?user=${news.username}`, {
      state: {
        list: news.news
      }
    })
  }

  const messageBtnHandler = () => {
    setActive(false)
    navigate(`/main/home/news/{${messages.id}}?user=${messages.username}`, {
      state: {
        list: messages.messages
      }
    })
  }

  return (
    <div>
      <h3>我是Home的内容</h3>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <button className={active ? "list-group-item active" : "list-group-item"} onClick={newsBtnHandler}>News</button>
          </li>
          <li>
            <button className={active ? "list-group-item" : "list-group-item active"} onClick={messageBtnHandler}>Message</button>
          </li>
        </ul>
      </div>
      <hr />
      <Outlet />
    </div>
  )
}
